<template>
	<view>
		<view class="tabbarv row">
			<text :class="newinidex == index ? 'newtab' : ''" v-for="(item,index) in getDates" class="tablist" :id="'t' + index" @tap="tabtap(index)">{{item}}</text>
			<text class="tabg" :style="tabgclass"></text>
		</view>
		
		<view class="list" v-for="item in list" :key="item.id">
			<view class="topv row">
				<text style="font-size: 30rpx;font-weight: 500;">提交类型：{{item.technician}}</text>
				<font style="color: #bdbabb;margin-left:20rpx">{{gettime(item.addtime,'yyyy.MM.dd')}}</font>

			</view>
        
			<text class="info">{{item.info}}</text>

			<view v-if="item.imgarr != null && item.imgarr != ''" class="tsimg row">
				<image @tap="yulanimg(imgindex,imgarr(item))" :src="url + item2" mode="aspectFill" v-for="(item2,imgindex) in imgarr(item)" ></image>
		   </view>
          		
			<view class="bomv" :class="state == '1' ? 'yichuli' : ''">
				<view>
					<text>状态：</text>
					<text>{{state(item)}}</text>
				</view>
				<text>{{item.state == '0' ? '该投诉/反馈还在处理中，请留意处理状态...' : item.reinfo}}</text>
			</view>
		</view>
		<null class="null" v-if="list.length == 0 && !load" info="还没有记录"></null>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				getDates:['全部','未处理','已处理'],
				tabgclass:{},
				newinidex:0,
				load:false,
				list:[]
			}
		},
		computed:{
			state(){
				return item=>{
					return item.state == '0' ? '未处理' : '已处理';
				}
			},
		
			imgarr(){
				return item=>{
					
					return JSON.parse(item.imgarr);
				}
			}
		},
		methods: {
			tabtap(index){
				this.newinidex = index;
				uni.createSelectorQuery().in(this).select('#t' + index).fields({size:true,rect:true},e => {
				  this.tabgclass = {left:(e.width - uni.upx2px(69)) / 2 + e.left + 'px'};
				}).exec();
				this.getdata(true);
			},
			yulanimg(index,itme){
				let arr = [];
				itme.forEach(item=>{
					arr.push(this.url + item)
				})
				uni.previewImage({
					urls:arr,
					count:index
				})
			},			
			getdata(is){
				if(is === true)this.list = [];this.load = true;
				let sign = this.md5(this.$store.state.userinfo.token + this.list.length.toString() + 'complaintcenter');
				this.GetJson(this.ip + 'complaintcenter.php','POST',{
					sign:sign,
					num:this.list.length,
					token:this.$store.state.userinfo.token,
					type:this.newinidex
				},e=>{
					this.load = false;
					if(this.isdata(e)){
						this.list = [...this.list,...e.list];
					}
				})
			}
		},
		onReady() {
			this.tabtap(0);
		},
		onReachBottom() {
			if(!this.load)this.getdata();
		}
	}
</script>

<style>
	page{
		background-color: #F1F0F0;
		padding-top: 62rpx;
	}
	.tabbarv{
		width: 750rpx;
		height: 62rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
	}
	.aimgv{
		flex-wrap: wrap;
		margin-top: 10rpx;
	}
	.aimgv>image{
		width: 132rpx;
		height: 126rpx;
		margin-right: 5rpx;
		border-radius: 5rpx;
		display: block;
	}
	.tsimg{
		flex-wrap: wrap;
		margin-top: 5rpx;
	}
	.tsimg>image{
		padding: 10rpx;
		width: 150rpx;
		height: 150rpx;
		margin-right: 5rpx;
		border-radius: 20rpx;
		display: block;
	}
	.scroll-view {
		height: 200rpx;
		width: 100%;
		white-space: nowrap;
		margin-top: 30rpx;
	}
	.scroll-view image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		display: inline-block;
	}
	.imgarrv {
		flex-wrap: wrap;
		margin-top: 21rpx;
	}

	.imgarrv>image {
		width: 112rpx;
		height: 112rpx;
		margin-right: 19rpx;
		border-radius: 2rpx;
	}	

	
	.tablist{
		text-align: center;
		display: flex;
		flex: 1;
		font-size: 35rpx;
		font-weight: 600;
		margin-bottom: 2rpx;
		justify-content: center;
		transition: color;
		
	}
	.newtab{
		color: var(--maincolor);
	}
	.tabg{
		width: 69rpx;
		height: 5rpx;
		font-size: 40rpx;
		font-weight: 600;
		background-color: var(--maincolor);
		border-radius: 100px;
		position: absolute;
		bottom: 0rpx;
		transition: left .3s;
	}
	.null{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.list{
		background-color: #FFFFFF;
		margin-top: ;
		margin:15rpx 11rpx;
		padding: 30rpx 19rpx;
	}
	.topv{
		
		font-size: 24rpx;
		color: #080808;
		border-bottom: 1rpx solid var(--fenge);
		padding-bottom: 17rpx;
		margin-bottom: 17rpx;
	}
	.title{
		display: block;
		font-size:24rpx;
		color: #080808;
	}
	.info{
		padding: 17rpx 0;
		display: block;
		font-size: 28rpx;

	}
	.bomv{
		margin-top: 17rpx;
		background-color: #FFFFFF;
		padding: 17rpx 12rpx;
		border-radius: 20rpx;
		box-shadow: 0px 0px 16rpx 0px rgba(0, 0, 0, 0.1);
	}
	.yichuli{
		background-color: #E0F4DB !important;
	}
	.bomv>view{
		font-size: 28rpx;
	}
	.bomv>view>:nth-child(2){
		color: #868586;
	}
	.yichuli>view>:nth-child(2){
		color: #F90909 !important;
	}
	.bomv>text{
		margin-top: 22rpx;
		color: #F90909;
		display: block;
		font-size: 28rpx;
	}
</style>
